package com.tailyou.androidlearning2426.act

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.tailyou.androidlearning2426.R
import com.tailyou.androidlearning2426.act.ui.theme.AndroidLearning2400Theme

// 每一个Activity对应一个界面
class LoginActivity : ComponentActivity() {

    // Activity有生命周期方法，从创建到销毁
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 沉浸式效果
        enableEdgeToEdge()
        // 设置页面要显示的内容
        setContent {
            // 设置主题模式，包括字体，颜色，样式
            // 每一个界面都使用AndroidLearning2400Theme，便于统一修改和保持统一的风格
            AndroidLearning2400Theme {
                // AndroidLearning2400Theme下一级才是需要修改的内容
                // 把要展现的内容封装成一个组件
                LoginView()
            }
        }
    }

}

@Composable
fun LoginView() {
    // Box：盒子容器，实现堆叠效果，写在前面的置于底层，写在后面的置于上层
    Box(modifier = Modifier.fillMaxSize()) {
        // Image作为背景，置于底层
        Image(
            painterResource(R.drawable.bg_act_login),
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
        // Column纵向布局，用于组织登录界面的组件，放在上层
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 32.dp, vertical = 56.dp)
        ) {
            // 第一行：LOGO
            Image(
                painterResource(R.drawable.ic_android),
                contentDescription = null,
                modifier = Modifier
                    .size(72.dp)
                    .background(Color(0xFF9B27AF))
            )
            // 第二行：欢迎文本
            Text(
                "您好，欢迎使用NFT",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White,
                modifier = Modifier.padding(top = 24.dp, bottom = 64.dp)
            )
            // 第三行：手机号输入框
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .background(Color(0x55000000))
                    .padding(12.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                val phone = remember { mutableStateOf(TextFieldValue()) }
                Image(painterResource(R.drawable.ic_phone_white), contentDescription = null)
                TextField(
                    value = "",
                    onValueChange = { },
                    label = { Text("手机号输入框") },
                    colors = TextFieldDefaults.colors(
                        // 未聚焦时的背景
                        unfocusedContainerColor = Color.Transparent,
                        // 聚焦时的背景
                        focusedContainerColor = Color.Transparent,
                    ),
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(0x00000000))
                )
            }

            Box(modifier = Modifier.height(12.dp))

            // 第四行：密码输入框
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .background(Color(0x55000000))
            ) {

            }

        }
    }
}

@Preview
@Composable
fun LoginViewPreview() {
    AndroidLearning2400Theme {
        LoginView()
    }
}